<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2744615_xe4s1meu63r.css" />
		<link rel="stylesheet" href="../content/UserArticleCss.css">
		<style>

		</style>
	</head>
	<body>

		<div id="View_UserArticle_Main">
			<!-- 导航栏 -->
			<div class="NavigationTop">
				<input type="text" id="SearchInput" v-model="SearchText" placeholder="搜索" @input="SearchChange" @focus="SearchFocus"
				 @blur="SearchBlur" autocomplete="off" />
			</div>
			<!-- 搜索显示 -->
			<div class="SearchDisplay" v-if="SearchFocusJudge">
				<ul>
					<li @click="SearchTextClich(item)" class="SearchDisplay_Li" v-for="item in SearchList">
						<span>{{item}}</span>
					</li>
				</ul>
			</div>
			<!-- 信息栏 -->
			<div class="View_UserArticle_Main">

				<div class="UserInfo_Div" :id="'User_'+UserInfo.userId">
					<div class="UserAvatar" :style="'background-image: url('+UserInfo.avatar" @click="UpdateAvatar"></div>
					<span class="UserName" style="font-weight: 700;" v-if="!IsNickNameJudge">
						{{UserInfo.nickName}}
						<i class="iconfont icon-xiugai" @click="UpdateName"></i>
					</span>
					<input type="text" id="UpdateNickNameInput" maxlength="10" @blur="UpdateNameBlur" v-if="IsNickNameJudge" />
					<ul class="UserInfo_Ul">
						<li>
							<div @click="PayViewClick">
								<span>关注数</span><span>{{SetNumberToString(UserInfo.pagCount)}}</span>
							</div>
							<div class="hr_div"></div>
						</li>
						<li>
							<div @click="PayPassiveViewClick">
								<span>粉丝数</span><span>{{SetNumberToString(UserInfo._PayCount)}}</span>
							</div>
							<div class="hr_div"></div>
						</li>
						<li>
							<div @click="LatestLikeViewClick">
								<span>最新点赞</span><span :class="Notify.latestLikesCount!=0?'IsLatest':''">{{SetNumberToString(Notify.latestLikesCount)}}</span>
							</div>
							<div class="hr_div"></div>
						</li>
						<li>
							<div>
								<span>最新评论</span><span :class="Notify.latestCommentsCount!=0?'IsLatest':''">{{SetNumberToString(Notify.latestCommentsCount)}}</span>
							</div>
							<div class="hr_div"></div>
						</li>
						<li>
							<div>
								<span>最新消息</span><span :class="Notify.latestMessageCount!=0?'IsLatest':''">{{SetNumberToString(Notify.latestMessageCount)}}</span>
							</div>
							<div class="hr_div"></div>
						</li>
						<li>
							<div @click="GoArticle">
								<span>去写文章</span>
							</div>
							<div class="hr_div"></div>
						</li>
					</ul>
				</div>

				<div class="UserArticle_Div">

					<div class="Li_Article" :id="'Article_'+item.articleId" v-for="item in ArticleArr">
						<div class="article-title">
							<span>{{item.title}}</span>
							<span>{{item.time}}</span>
						</div>
						<div class="article-del">
							<span v-if="item.isCurUser" @click="DelArticle"><i class="iconfont icon-shanchu"></i></span>
						</div>
						<div class="ArticleText" v-html="SetContext(item.context)">
							
						</div>
						<div class="article-Interactive">
							<span :class="item.isLike?'LikeCheck':''" @click="ArticleLike">
								<i class="iconfont icon-dianzan"></i>{{SetNumberToString(item.likeCount)}}
							</span>
							<span>
								<i class="iconfont icon-pinglun"></i>{{SetNumberToString(item.commentCount)}}
							</span>
						</div>
					</div>

				</div>
			</div>
		</div>

		<script src="../javaScript/vue.js"></script>
		<script src="../javaScript/jquery-3.5.1.min.js"></script>
		<script src="../javaScript/UserArticle/UserArticleJs.js"></script>
		<script>
			var View_UserArticel_Main_Vue = new Vue({
				el: "#View_UserArticle_Main",
				data: {
					UserInfo: "",
					Notify: "",
					ArticleIndex: 0,
					ArticleArr: [],
					IsNickNameJudge: false,
					SetContext: function(text) {
						text = text.replaceAll('$T01', '<');
						text = text.replaceAll('$T02', '>');
						return text.replaceAll('T03', '/');
					},
					SetNumberToString(text) {
						var num = (text + "").toString();
						var len = num.length;
						if (num.length < 4)
							return num;
						if (num.length == 4)
							return num.substring(0, 1) + "." + num.substring(1, 2) + "k";
						if (num.length > 4)
							return num.substring(0, len - 4) + "." + num.substring(len - 4, len - 3) + "w";
					},
					SearchText: "",
					SearchList: [],
					SearchFocusJudge: false,
					SearchTimeJudge: 0,
					SearchTime: ""
				},
				watch: {
					//搜索限制请求
					SearchTimeJudge(nval, oval) {
						var thisVue = this;
						if (nval == 1) {
							$.get("https://localhost:44356/api/Search/Real", {
								LikeText: thisVue.SearchText
							}, function(data) {
								console.log(data);
								thisVue.SearchList = data.result;
								thisVue.SearchTimeJudge = 0;
							})
						}
					}
				},
				methods: {
					//搜索项点击
					SearchTextClich(text) {
						$.get("https://localhost:44356/api/Search/InsertHeat",{
							LikeText : text
						},function(data){
							console.log(data)
						})
						location = "./Search.html?context=" + text;
					},
					//搜索事件
					SearchChange() {
						var thisVue = this;
						if (this.SearchText == "") {
							this.SearchList = [];
							return;
						}

						clearTimeout(this.SearchTime);
						this.SearchTime = setTimeout(function() {
							thisVue.SearchTimeJudge = 1;
						}, 1000)
					},
					//搜索焦点
					SearchFocus() {
						this.SearchFocusJudge = true;
					},
					//搜索焦点消失
					SearchBlur() {
						var thisVue = this;
						setTimeout(function() {
							thisVue.SearchFocusJudge = false;
						}, 150)
					},
					//关注页跳转
					PayViewClick() {
						location = "./UserPay.html";
					},
					//粉丝页
					PayPassiveViewClick(){
						location = "./UserPayPassive.html";
					},
					//最新点赞
					LatestLikeViewClick(){
						location = "./LatestLike.html";
					},
					//修改昵称
					UpdateName() {
						var thisVue = this;
						this.IsNickNameJudge = true;
						setTimeout(function() {
							var input = document.getElementById("UpdateNickNameInput");
							input.focus();
							input.value = thisVue.UserInfo.nickName;
						}, 100);
					},
					//关闭修改昵称
					UpdateNameBlur(e) {
						var thisVue = this;
						var newName = e.target.value;
						if (newName == "" || newName == null) {
							console.log("昵称不能为空");
							thisVue.IsNickNameJudge = false;
							return;
						}
						$.post("https://localhost:44356/api/UserDetails/UpdateName", {
							Token: localStorage.getItem("ArticleUserId"),
							Name: newName
						}, function(data) {
							console.log(data);
							if (data.statusCode == 0) {
								thisVue.UserInfo.nickName = newName;
							}
						})
						//关闭
						thisVue.IsNickNameJudge = false;
					},
					//修改头像
					UpdateAvatar() {

					},
					//删除文章
					DelArticle(e) {
						if (!confirm("确定要删除这篇文章吗"))
							return;
						var thisVue = this;
						var div = $(e.target).parents('.Li_Article');
						$.get("https://localhost:44356/api/Article/Delete", {
							Token: localStorage.getItem("ArticleUserId"),
							ArticleId: div.attr("id").split("_")[1]
						}, function(data) {
							console.log(data)
							if (data.statusCode == 0) {
								div.animate({
									"height": "0px",
								}, 100, function() {
									div.css("padding", "0px");
								})
							}
						})
					},
					//文章点赞
					ArticleLike(e) {
						var thisVue = this;
						var div = $(e.target).parents('.Li_Article');
						$.get("https://localhost:44356/api/Interactive/ArticleLike", {
							Token: localStorage.getItem("ArticleUserId"),
							ArticleId: div.attr("id").split("_")[1]
						}, function(data) {
							console.log(data)
							if (data.statusCode == 0) {
								var arr = thisVue.ArticleArr;
								for (var index in arr) {
									if (arr[index].articleId == div.attr("id").split("_")[1]) {
										arr[index].isLike = data.result;
										if (data.result)
											arr[index].likeCount++;
										else
											arr[index].likeCount--;
									}
								}
							}
						})
					},
					//写文章
					GoArticle(){
						location = "./Publish.html";
					}
				}
			});
			$(function() {





			})
		</script>

	</body>
</html>
